<template>
  <div class='content'>
    <box-container class='bg-grey'
                   :spinShow='spinShow1'
                   style="width:432px;height:400px">
      <radar-style-2 />
    </box-container>
    <box-container class='bg-grey'
                   :spinShow='spinShow1'
                   style="width:560px;height:400px">
      <radar-style-3 />
    </box-container>
    <box-container class='bg-grey'
                   :spinShow='spinShow1'>
      <radar-style-1 chartId='radar1'
                     :source='ageRangeData' />
    </box-container>

  </div>
</template>
<script>
import boxContainer from '../common/box-container'
import RadarStyle1 from '../../cell/radar/radar-style-1'
import RadarStyle2 from '../../cell/radar/radar-style-2'
import RadarStyle3 from '../../cell/radar/radar-style-3'
export default {
  components: {
    'box-container': boxContainer,
    'radar-style-1': RadarStyle1,
    'radar-style-2': RadarStyle2,
    'radar-style-3': RadarStyle3,
  },
  data () {
    return {
      spinShow1: true,
      ageRangeData: [],
    }
  },
  created () {
    this.$http.get('/radar/ageRangeSource')
      .then(res => {
        if (res.state && res.data) {
          this.ageRangeData = res.data
          this.spinShow1 = false
        }
      })
      .catch(err => {
        console.log(err)
        this.$fetchMock('/static/mock/radar/ageRangeSource.json')
          .then(res => {
            this.ageRangeData = res
            this.spinShow1 = false
          })
      })
  },
}
</script>
<style lang="scss" scoped>
@import "./radar.scss";
</style>

